<template>
  <div class="prcessBox" :style="{height:height,width:width}">
    <div v-for="(item, i) in visitorData" :key="i">
      <div class="circlebox"><i class="circle1" :class="{'circle2': i > 2}">{{ i+ 1 }}</i>{{ item.name }}</div>
      <div class="prcessbj"><div class="prcessCount" :style="{width: item.percent}"></div><div class="count">{{ item.value }}</div></div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100px'
    },
    className: {
      type: String,
      default: 'chart'
    },
    visitorData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      chart: null
    }
  },
  methods: {
 
  }
}
</script>
<style lang="scss" scoped>
.prcessBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 15px 20px 10px;
  font-size: 14px;
  .circlebox {
    display: flex;
    align-items: center;
    height: 24px;
    color:#00FF00;
  }
  .circle1, .circle2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background: url(./../images/u8715.svg);
    background-size: 100% 100%;
    color: #ffffff;
    &.circle2 {
      background: url(./../images/u8724.svg);
    }
  }
  .prcessbj {
    position: relative;
    width: calc(100% - 40px);
    height:8px;
    background:inherit;
    background-color:rgba(242, 242, 242, 1);
    border:none;
    border-radius:10px;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
    .prcessCount {
      height:10px;
      margin-top: -1px;
      background:-webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(0, 102, 255, 1) 100%, rgba(0, 102, 255, 1) 100%);
      background:-moz-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(0, 102, 255, 1) 100%, rgba(0, 102, 255, 1) 100%);
      background:linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(0, 102, 255, 1) 100%, rgba(0, 102, 255, 1) 100%);
      border:none;
      border-radius:10px;
      -moz-box-shadow:none;
      -webkit-box-shadow:none;
      box-shadow:none;
    }
    .count {
      position: absolute;
      bottom: -3px;
      right: -40px;
      z-index: 1;
      text-align: right;
      color: #ffffff;
    }
  }
}
</style>
